class Model {

    constructor(){
        this.init()
    }

    init() {

        this.initUrl();
        // this.initRenameModel();
        // this.initCopyModel();
        // this.initEditModel();
        // this.initNewDocumentModel();
        // this.initNewDirectoryModel();
        // this.initUploadModal();
        this.bindEvents();
    }
    initUrl(){
        this.fileContentUrl = "file/content";
        this.fileRenameUrl = "file/rename";
        this.fileCopyUrl = "file/copy";
        this.fileDeleteUrl = "file/delete";
        this.fileDownloadUrl = "files/download";
        this.fileContentEditorUrl = "file/content/editor";
    }

    getDoubleInputFormTemplate (options) {

        //		{
        //			formId: "",
        //			fInputId : "",
        //			fInputName : "",
        //			sInputId : "",
        //			sInputName : "",
        //			submitId : ""
        //		}
        var opt = options;
        return `<form id="${opt.formId}">
					<div class="input-group">
					<input type="hidden" class="form-control"
					id="${opt.fInputId}" name="${opt.fInputName}">
					<input type="text"
					class="form-control" id="${opt.sInputId}" name="${opt.sInputName}"
					placeholder="请输入...">
				<span class="input-group-btn">
					<button class="btn btn-default" type="button"
						id="${opt.submitId}">Submit!</button>
				</span>
			</div>
			</form>`;
    };
    getSingleInputFormTemplate (options){
        var opt = options;
        return `<form id="${opt.formId}">
                <div class="input-group">
					<input type="text"
					class="form-control" id="${opt.inputId}" name="${opt.inputName}"
					placeholder="请输入...">
				<span class="input-group-btn">
					<button class="btn btn-default" type="button"
						id="${opt.submitId}">Submit!</button>
				</span>
			</div>
			</form>`;
    };
    getBtnTemplate (options) {

        var opt = options;
        return `<div class="modal-footer">
		<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		<button type="button" class="btn btn-primary">Save changes</button>
	</div>`;
    };
    getModelTemplate (options) {

        // {
        // modalId : "rename-modal",
        // modalTitle : "重命名",
        // modalBody: renameBodyTmp,
        // modalFooter : "",
        // }
        var opt = options;
        return `
		<div id="${opt.modalId}" class="modal fade" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="${opt.modalTitleId}" >${opt.modalTitle}</h4>
					</div>
					<div class="modal-body" id="${opt.modalBodyId}">
						${opt.modalBody}
					</div>
					${opt.modalFooter}
				</div>
			</div>
		</div>`;
    }



    initRenameModel () {
        var formOptions = {
            formId: "rename-form",
            fInputId: "f-rename-input",
            fInputName: "name",
            sInputId: "s-rename-input",
            sInputName: "rename",
            submitId: "rename-submit"
        };
        var renameBodyTmp = this.getDoubleInputFormTemplate(formOptions);
        var modalOptions = {
            modalId: "rename-modal",
            modalTitleId: "rename-title-id",
            modalTitle: "重命名",
            modalBodyId: "rename-body-id",
            modalBody: renameBodyTmp,
            modalFooter: "",
        };

        var renameModelTmp = this.getModelTemplate(modalOptions);
        $("body").append(renameModelTmp);
    }
    initCopyModel () {
        var formOptions = {
            formId: "copy-form",
            fInputId: "f-copy-input",
            fInputName: "name",
            sInputId: "s-copy-input",
            sInputName: "targetDir",
            submitId: "copy-submit"
        };
        var copyBodyTmp = this.getDoubleInputFormTemplate(formOptions);
        var modalOptions = {
            modalId: "copy-modal",
            modalTitleId: "copy-title-id",
            modalTitle: "复制",
            modalBodyId: "copy-body-id",
            modalBody: copyBodyTmp,
            modalFooter: "",
        };

        var copyModelTmp = this.getModelTemplate(modalOptions);
        $("body").append(copyModelTmp);
    }

    initEditModel () {

        var editFooterTmp = `<div id="edit-footer-id" class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			<button id="edit-submit" type="button" class="btn btn-primary">提交更改</button>
		</div>`;

        var editBodyTmp = `<textarea style="resize: none;" class="form-control" rows="20"
		  id="edit-textarea" readonly>不是文件！</textarea>`;
        var modalOptions = {
            modalId: "edit-modal",
            modalTitleId: "edit-title-id",
            modalTitle: "查看",
            modalBodyId: "edit-body-id",
            modalBody: editBodyTmp,
            modalFooter: editFooterTmp,
        };

        var editModelTmp = this.getModelTemplate(modalOptions);
        console.log(editModelTmp);
        $("body").append(editModelTmp);
    };


    initNewDocumentModel () {

        var formOptions = {
            formId: "new-document-form",
            inputId: "new-document-input",
            inputName: "name",
            submitId: "new-document-submit"
        };
        var newDocumentBodyTmp = this.getSingleInputFormTemplate(formOptions);
        var modalOptions = {
            modalId: "new-document-modal",
            modalTitleId: "new-document-title-id",
            modalTitle: "新建",
            modalBodyId: "new-document-body-id",
            modalBody: newDocumentBodyTmp,
            modalFooter: "",
        };

        var newDocumentModelTmp = this.getModelTemplate(modalOptions);
        $("body").append(newDocumentModelTmp);
    };


    initNewDirectoryModel () {

        var formOptions = {
            formId: "new-directory-form",
            inputId: "new-directory-input",
            inputName: "name",
            submitId: "new-directory-submit"
        };
        var newDirectoryBodyTmp = this.getSingleInputFormTemplate(formOptions);
        var modalOptions = {
            modalId: "new-directory-modal",
            modalTitleId: "new-directory-title-id",
            modalTitle: "新建",
            modalBodyId: "new-directory-body-id",
            modalBody: newDirectoryBodyTmp,
            modalFooter: "",
        };

        var newDirectoryModelTmp = this.getModelTemplate(modalOptions);
        $("body").append(newDirectoryModelTmp);
    };

    initUploadModal (){

        var uploadBodyTmp = `<span class="btn btn-default fileinput-button">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>浏览</span>
                <input  id="fileupload-input" type="file" name="files[]" multiple="multiple">
        </span>
        <div id="dropzone" class="fade well">请将需要上传的文件拖拽至此</div>
            <div id="progress">
            <div style="width: 0%;"></div>
        </div>
        <table id="upload-files" style="width: 100%; border: 1px solid;">
            <tr>
                <th>名称</th>
                <th>类型</th>
                <th>大小</th>
            </tr>
        </table>`;
        var uploadFooterTmp = `<div id="upload-footer-id" class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		</div>`;
        var modalOptions = {
            modalId: "fileupload-modal",
            modalTitleId: "fileupload-title-id",
            modalTitle: "文件上传",
            modalBodyId: "fileupload-body-id",
            modalBody: uploadBodyTmp,
            modalFooter: uploadFooterTmp,
        };

        var uploadModelTmp = this.getModelTemplate(modalOptions);
        $("body").append(uploadModelTmp);

        $('#fileupload-input').fileupload({
            dataType: 'json',
            url: "files/upload",
            done: function (e, data) {
                $("tr:has(td)").remove();
                $.each(data.result, function (index, file) {
                    $("#upload-files").append(
                        $('<tr/>')
                            .append($('<td/>').text(file.fileName))
                            .append($('<td/>').text(file.fileSize))
                            .append($('<td/>').text(file.fileType))
                            .append($('<td/>').text("上传成功！"))
                    );
                });
            },

            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .bar').css(
                    'width',
                    progress + '%'
                );
            },
            dropZone: $('#dropzone')
        });
    };

    bindEvents(){

        $("#copy-submit").on("click", () => {
            console.log("copy-submit")
            $.getJSON(this.fileCopyUrl, $("#copy-form").serialize(), result => {

                if (result.code == 200) {
                    $("#copy-modal").modal("hide");
                    enterDir(currentDir);
                } else {
                    alert(result.message);
                }
            });
        });
        $("#rename-submit").on("click", () => {
            console.log("rename-submit")
            $.getJSON(this.fileRenameUrl, $("#rename-form").serialize(), result => {

                if (result.code == 200) {
                    $("#rename-modal").modal("hide");
                    enterDir(currentDir);
                } else {
                    alert(result.message);
                }
            });
        });
        console.log("edit-submit",$("#edit-submit"))
        $("#edit-submit").on("click",  () => {
            console.log("edit-submit",$("#edit-submit"))
            var textarea = $("#edit-textarea").val();
            var title = $("#edit-title-id").text();
            var name = Tools.getCurrentName(title);
            $.ajax({
                // cache:true,// 保留缓存数据
                type: "post",
                url: this.fileContentEditorUrl,// 这是我在后台接受数据的文件名
                data: {text: textarea, "name": name},
                error: request => {// 请求失败之后的操作
                    console.log(request);
                },
                success: data => {// 请求成功之后的操作
                    console.log("success");
                    $("#edit-modal").modal("hide");
                }
            });
        });
    }

}



